<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人体工学数据处理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
  <!-- Element UI -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      padding-top: 32px; /* 为窗口控制栏留出空间 */
      background-color: #f8f9fa;
      overflow-x: hidden;
      min-height: 100vh;
      position: relative;
    }
    
    /* 侧边栏样式 */
    .sidebar {
      position: fixed;
      top: 32px; /* 为窗口控制栏留出空间 */
      left: 0;
      height: calc(100% - 32px); /* 调整高度以适应顶部偏移 */
      width: 250px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      transition: all 0.3s ease, left 0.3s ease, transform 0.3s ease;
      transform: translateX(-100%);
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .sidebar.open {
      transform: translateX(0);
    }
    
    @media (min-width: 992px) {
      .sidebar {
        transform: translateX(-100%);
      }
      
      .sidebar.open {
        transform: translateX(0);
      }
      
      body.sidebar-open .sidebar {
        transform: translateX(0);
      }
    }
    
    /* 侧边栏遮罩层样式 */
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    /* 小窗口下侧边栏覆盖样式 */
    @media (max-width: 991.98px) {
      .sidebar.open {
        width: 250px;
        z-index: 1050;
      }
      
      .sidebar.open ~ .sidebar-overlay {
        display: block;
        opacity: 1;
      }
      
      .sidebar.open ~ .main-content {
        margin-left: 0;
        width: 100%;
        padding-left: 20px;
      }
      
      body {
        position: relative;
        overflow-x: hidden;
      }
    }
    
    .sidebar-header {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .sidebar-header h3 {
      color: rgb(0, 0, 0);
      margin: 0;
      font-size: 1.5rem;
    }
    
    .sidebar-menu {
      padding: 20px 0;
    }
    
    .menu-category {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.8rem;
      text-transform: uppercase;
      padding: 10px 20px;
      margin-top: 10px;
    }
    
    .menu-item {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .menu-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .menu-item.active {
      background: rgba(255, 255, 255, 0.2);
      border-left: 8px solid #0d6efd;
    }
    
    .menu-item i {
      margin-right: 10px;
      font-size: 1.2rem;
    }
    
    /* 主内容区域样式 */
    .main-content {
      margin-left: 0;
      padding: 20px;
      transition: all 0.3s ease, transform 0.3s ease;
      width: 100%;
      position: relative;
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    .main-content.sidebar-open {
      margin-left: 250px;
      width: calc(100% - 250px);
    }
    
    @media (max-width: 991.98px) {
      .main-content.mobile-sidebar-open {
        transform: translateX(250px);
      }
    }
    
    @media (max-width: 991.98px) {
      .main-content {
        width: 100%;
        margin-left: 0;
        transition: transform 0.3s ease, margin-left 0.3s ease, width 0.3s ease;
      }
      
      .main-content.sidebar-open {
        margin-left: 0;
        width: 100%;
        transform: translateX(0);
      }
      
      .main-content.mobile-sidebar-open {
        transform: translateX(250px);
      }
      
      .sidebar {
        width: 250px;
        left: -250px;
        transform: translateX(0);
      }
      
      .sidebar.open {
        left: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      }
      
      body.sidebar-open {
        overflow: hidden;
      }
    }
    
    @media (min-width: 992px) {
      .menu-toggle {
        display: none;
      }
    }
    
    /* 汉堡菜单按钮 */
    .menu-toggle {
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 1001;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .tab-content {
      display: none;
    }
    
    .tab-content.active {
      display: block;
    }
    
    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      padding: 2rem;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    h3 {
      color: #212529;
      margin-top: 0;
      margin-bottom: 1.5rem;
      text-align: center;
      font-weight: 600;
    }
    
    h4 {
      color: #212529;
      margin-top: 0;
      margin-bottom: 1rem;
      font-weight: 500;
    }

    h5 {
      color: #ffffff;
      margin-top: 0;
      margin-bottom: 1rem;
      font-weight: 500;
    }
    
    .upload-area {
      border: 2px dashed #6c757d;
      border-radius: 0.5rem;
      padding: 3rem 2rem;
      text-align: center;
      cursor: pointer;
      background-color: #f8f9fa;
      transition: all 0.3s ease;
      margin-bottom: 1.5rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      position: relative;
      overflow: hidden;
    }
    
    .upload-area::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
      z-index: 0;
    }
    
    .upload-area:hover {
      background-color: #e9ecef;
      border-color: #0d6efd;
      transform: translateY(-2px);
    }
    
    .upload-area.dragover {
      background-color: rgba(13, 110, 253, 0.1);
      border-color: #0d6efd;
      transform: translateY(-2px);
    }
    
    .upload-area.dragover::after {
      content: "释放文件开始上传";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(13, 110, 253, 0.9);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      font-weight: 500;
      z-index: 10;
    }
    
    .upload-area.highlight {
      background-color: rgba(13, 110, 253, 0.1);
      border-color: #0d6efd;
      transform: translateY(-2px);
    }
    
    .upload-area.highlight::after {
      content: "释放文件开始上传";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(13, 110, 253, 0.9);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      font-weight: 500;
      z-index: 10;
    }
    
    .upload-icon {
      font-size: 3.5rem;
      margin-bottom: 1.5rem;
      color: #0d6efd;
      opacity: 0.8;
      position: relative;
      z-index: 1;
    }
    
    .column-mapping {
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .row {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(-1 * var(--bs-gutter-y));
      margin-right: calc(-0.5 * var(--bs-gutter-x));
      margin-left: calc(-0.5 * var(--bs-gutter-x));
    }
    
    .col-md-4 {
      flex: 0 0 auto;
      width: 33.333333%;
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5);
      margin-top: var(--bs-gutter-y);
    }
    
    .form-control {
      display: block;
      width: 100%;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      appearance: none;
      border-radius: 0.375rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .form-text {
      margin-top: 0.25rem;
      font-size: 0.875em;
      color: #6c757d;
    }
    
    .text-muted {
      color: #6c757d !important;
    }
    
    .mb-3 {
      margin-bottom: 1rem !important;
    }
    
    .mb-4 {
      margin-bottom: 1.5rem !important;
    }
    
    .form-label {
      margin-bottom: 0.5rem;
      font-weight: 500;
    }
    
    /* 确保浏览按钮高度与输入框匹配 */
    .input-group .btn {
      height: calc(1.5em + 0.75rem + 2px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .input-group .form-control {
      height: calc(1.5em + 0.75rem + 2px);
    }
    
    .form-check {
      display: block;
      min-height: 1.5rem;
      padding-left: 1.5em;
      margin-bottom: 0.125rem;
    }
    
    .form-check-input {
      width: 1em;
      height: 1em;
      margin-top: 0.25em;
      vertical-align: top;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      border: 1px solid rgba(0, 0, 0, 0.25);
      appearance: none;
    }
    
    .form-check-input[type="checkbox"] {
      border-radius: 0.25em;
    }
    
    .form-check-input:checked {
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
    
    .form-check-input:checked[type="checkbox"] {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }
    
    .form-check-label {
      color: #212529;
      cursor: pointer;
    }
    
    .progress-container {
      margin-bottom: 1.5rem;
    }
    
    .progress {
      height: 1rem;
      font-size: 0.75rem;
      background-color: #e9ecef;
      border-radius: 0.375rem;
      margin-bottom: 0.75rem;
    }
    
    .progress-bar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      background-color: #0d6efd;
      transition: width 0.3s ease;
      border-radius: 0.375rem;
    }
    
    .log-panel {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-radius: 0.375rem;
      padding: 1rem;
      margin-top: 1.5rem;
      background-color: #f8f9fa;
      font-family: var(--bs-font-monospace);
      font-size: 0.875rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .log-entry {
      margin-bottom: 0.5rem;
      padding: 0.375rem 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: flex-start;
    }
    
    .log-entry i {
      margin-top: 0.125rem;
    }
    
    .log-time {
      color: #6c757d;
      margin-right: 0.5rem;
      font-size: 0.8125rem;
    }
    
    .log-entry.info {
      color: #084298;
    }
    
    .log-entry.success {
      color: #0f5132;
    }
    
    .log-entry.error {
      color: #842029;
    }
    
    .log-entry.warning {
      color: #664d03;
    }
    
    .result-section {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #dee2e6;
    }
    
    .btn {
      width: 115px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      border-radius: 0.375rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .btn-primary {
      color: #fff;
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
    
    .btn-primary:hover {
      color: #fff;
      background-color: #0b5ed7;
      border-color: #0a58ca;
    }
    
    .btn-secondary {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }
    
    .btn-secondary:hover {
      color: #fff;
      background-color: #5c636a;
      border-color: #565e64;
    }
    
    .mt-3 {
      margin-top: 1rem !important;
    }
    
    .ml-2 {
      margin-left: 0.5rem !important;
    }
    
    .vanta-container {
      width: 100%;
      height: 100vh; /* 占据整个视口的高度 */
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
    
    /* 窗口控制按钮样式 */
    .window-controls-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 32px;
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10000;
        -webkit-app-region: drag;
    }
    
    .window-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        font-weight: 500;
        margin-left: 16px;
        letter-spacing: 0.3px;
        -webkit-app-region: drag;
    }
    
    .window-controls {
        display: flex;
        align-items: center;
        gap: 1px;
        margin-right: 8px;
        -webkit-app-region: no-drag;
    }
    
    .control-btn {
        width: 32px;
        height: 24px;
        border: none;
        outline: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-app-region: no-drag;
    }
    
    .control-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 1);
        transform: translateY(-0.5px);
    }
    
    .control-btn:active {
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.15);
    }
    
    .minimize-btn:hover {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
    }
    
    .maximize-btn:hover {
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
    }
    
    .close-btn:hover {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
    }
    
    .control-btn svg {
        display: block;
        width: 12px;
        height: 12px;
        color: inherit;
        fill: currentColor;
        stroke: currentColor;
        pointer-events: none;
        flex-shrink: 0;
    }
  </style>
</head>
<body>
  <!-- 窗口控制栏 -->
  <div class="window-controls-bar">
    <div class="window-title">Ergonomic Data Process</div>
    <div class="window-controls">
      <button class="control-btn minimize-btn" onclick="minimizeWindow()">
        <svg viewBox="0 0 12 12">
          <rect x="2" y="5.5" width="8" height="1" rx="0.5"/>
        </svg>
      </button>
      <button class="control-btn maximize-btn" onclick="toggleMaximize()">
        <svg viewBox="0 0 12 12">
          <rect x="2" y="2" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1"/>
        </svg>
      </button>
      <button class="control-btn close-btn" onclick="closeWindow()">
        <svg viewBox="0 0 12 12">
          <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
  </div>

  <div id="vantaRef" class="vanta-container"></div>
  
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <h5>人体工学数据处理</h5>
    </div>
    <div class="sidebar-menu">
      <div class="menu-category">数据处理</div>
      <div class="menu-item active" data-tab="csv-process">
        <i class="bi bi-file-earmark-spreadsheet"></i>
        <span>CSV数据预处理</span>
      </div>
      <div class="menu-item" data-tab="data-analysis">
        <i class="bi bi-graph-up"></i>
        <span>有效数据提取</span>
      </div>
      <div class="menu-item" data-tab="coefficient-variation">
        <i class="bi bi-calculator"></i>
        <span>离散系数计算</span>
      </div>
      <div class="menu-item" data-tab="data-export">
        <i class="bi bi-file-earmark-word"></i>
        <span>Word生成</span>
      </div>
      <div class="menu-category">系统</div>
      <div class="menu-item" data-tab="settings">
        <i class="bi bi-gear"></i>
        <span>XX</span>
      </div>
      <div class="menu-item" data-tab="help">
        <i class="bi bi-question-circle"></i>
        <span>XX</span>
      </div>
    </div>
  </div>
  
  <!-- 侧边栏遮罩层 -->
  <div class="sidebar-overlay" id="sidebar-overlay"></div>
  
  <!-- 主内容区域 -->
  <div class="main-content" id="main-content">
    <!-- 顶部菜单按钮 -->
    <div class="header d-flex justify-content-between align-items-center mb-4">
      <button class="menu-toggle" id="menu-toggle">
        <i class="bi bi-list"></i>
      </button>
      <!-- <h2 class="fw-bold mb-0">CSV数据处理</h2> -->
      <div style="width: 40px;"></div> <!-- 占位元素，保持标题居中 -->
    </div>
    
    <!-- CSV数据处理标签页 -->
    <div class="tab-content active" id="csv-process-content">
      <div class="container">
        <div class="header text-center mb-4">
          <p class="text-muted">上传CSV文件，提取数据并写入Excel模板</p>
        </div>
        
        <div class="upload-area" id="uploadArea">
          <div class="upload-icon">
            <i class="bi bi-file-earmark-spreadsheet fs-1"></i>
          </div>
          <h4>点击或拖拽CSV文件到此处</h4>
          <p class="text-muted">支持.csv格式文件，可选择多个文件</p>
          <p><code>注: 文件名格式为 Volunteer X condition X.csv / Volunteer X condition X after.csv</code></p>
          <input type="file" id="fileInput" accept=".csv" multiple style="display: none;">
        </div>
        <div class="d-flex gap-2 justify-content-between">
          <button class="btn btn-outline-danger flex-grow-1 ms-3" id="clearXlsxBtn" style="max-width: 140px;">
            <i class="bi bi-trash me-1"></i> 清除xlsx文件
          </button>
        </div>
    <div class="column-mapping mt-3" id="columnMappingSection" style="display: none;">
          <h5 class="mb-3">列映射设置</h5>
          <p class="text-muted mb-4">如果自动检测的列不正确，请手动指定列索引（从0开始）</p>
          
          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="maxPressureColumn" class="form-label">最大压力列索引</label>
              <input type="number" class="form-control" id="maxPressureColumn" min="0" value="2">
              <div class="form-text">默认为C列(索引2)</div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="avgPressureColumn" class="form-label">平均值列索引</label>
              <input type="number" class="form-control" id="avgPressureColumn" min="0" value="6">
              <div class="form-text">默认为G列(索引6)</div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="contactAreaColumn" class="form-label">接触面积列索引</label>
              <input type="number" class="form-control" id="contactAreaColumn" min="0" value="8">
              <div class="form-text">默认为I列(索引8)</div>
            </div>
          </div>
          
          <div class="mb-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="useManualMapping">
              <label class="form-check-label" for="useManualMapping">使用手动列映射</label>
            </div>
          </div>
          
          <div class="mb-4">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="startValue" class="form-label">帧数起始值</label>
                <input type="number" class="form-control" id="startValue" min="1" placeholder="例如: 400">
                <div class="form-text">设置A列起始值,不填写则A列为空</div>
              </div>
            </div>
            <div class="alert alert-info" role="alert">
              <i class="bi bi-info-circle me-2"></i>
              <strong>说明：</strong>生成的Excel文件A列将从起始值开始递增，对应CSV数据的每一组值。例如设置400，第一组CSV数据对应A列的400，第二组对应401，以此类推直到CSV所有数据结束。
            </div>
          </div>
          
          <div class="mb-4">
            <label for="outputFolder" class="form-label">输出文件夹路径 (可选)</label>
            <input type="text" class="form-control" id="outputFolder" placeholder="留空将自动保存到桌面的'Ergonomic data'文件夹">
            <div class="form-text">如不指定，Excel文件将自动保存到桌面的'Ergonomic data'文件夹</div>
          </div>
          
          <button class="btn btn-primary" id="processBtn">
            <i class="bi bi-gear-fill me-1"></i> 处理数据
          </button>
        </div>
        
        <!-- After文件处理区域 -->
        <div class="after-file-mapping mt-3" id="afterFileMappingSection" style="display: none;">
          <h4 class="mb-3">After文件处理设置</h4>
          <p class="text-muted mb-4">检测到文件名包含'after'，请选择Excel文件并设置起始帧数</p>
          
          <div class="mb-4">
            <label for="excelTemplateFile" class="form-label">选择Excel文件</label>
            <input type="file" class="form-control" id="excelTemplateFile" accept=".xlsx,.xls">
            <div class="form-text">请选择要填充数据的Excel文件</div>
          </div>
          
          <div class="mb-4">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="afterStartValue" class="form-label">帧数起始值</label>
                <input type="number" class="form-control" id="afterStartValue" min="1" placeholder="例如: 400">
                <div class="form-text">设置A列起始值</div>
              </div>
            </div>
            <div class="alert alert-info" role="alert">
              <i class="bi bi-info-circle me-2"></i>
              <strong>说明：</strong>程序将提取元数据中的数据，写入到Excel中'一小时后'sheet中，A列将从起始值开始递增。
            </div>
          </div>
          
          <button class="btn btn-primary" id="processAfterBtn">
            <i class="bi bi-gear-fill me-1"></i> 提取数据
          </button>
        </div>
        
        <div class="progress-container mt-4" style="display: none;" id="progressContainer">
          <h4 class="mb-3">处理进度</h4>
          <div class="d-flex justify-content-between mb-1">
            <span>完成情况</span>
            <span id="progressText">0%</span>
          </div>
          <div class="progress" style="height: 1.5rem;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="progressBar"></div>
          </div>
        </div>
        
        <div class="log-panel mt-4" id="logPanel">
           <h5 class="mb-3 d-flex align-items-center">
             <i class="bi bi-journal-text me-2"></i> 处理日志
           </h5>
           <div class="log-entry info">
              <i class="bi bi-info-circle me-1"></i>
              <span class="log-time">[初始化]</span>
              系统就绪，等待上传CSV文件...
            </div>
         </div>
        
        <div class="result-section mt-4" style="display: none;" id="resultSection">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="bi bi-check-circle me-2"></i> 处理结果
          </h4>
          <div class="alert alert-success" role="alert" id="resultMessage"></div>
          <div class="mt-3">
            <!-- <button class="btn btn-primary" id="downloadBtn">
              <i class="bi bi-download me-1"></i> 另存结果
            </button> -->
            <button class="btn btn-outline-primary ms-2" id="reuploadBtn">
              <i class="bi bi-upload me-1"></i> 重新上传
            </button>
            <button class="btn btn-outline-secondary ms-2" id="recalculateBtn">
              <i class="bi bi-calculator me-1"></i> 重新计算
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 有效数据提取标签页 -->
    <div class="tab-content" id="data-analysis-content">
      <div class="container">
        <div class="header text-center mb-4">
          <p class="text-muted">提取Excel中的指定数据</p>
        </div>
        
        <!-- 文件API警告提示 -->
        <div class="alert alert-warning alert-dismissible fade show" role="alert" id="fileAPIWarning" style="display: none;">
          <i class="bi bi-exclamation-triangle-fill me-2"></i>
          <strong>警告：</strong> 文件API不可用，部分功能将受限。数据提取结果将通过浏览器下载。
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="mb-4">
          <label for="dataExtractionInputFolder" class="form-label">输入文件夹路径</label>
          <input type="text" class="form-control" id="dataExtractionInputFolder" placeholder="输入包含Excel文件的文件夹路径">
          <div class="form-text">默认使用CSV数据预处理的输出文件夹路径</div>
        </div>
        
        <div class="mb-4">
          <label for="customFrameNumber" class="form-label">七区自定义帧数</label>
          <input type="text" class="form-control" id="customFrameNumber" placeholder="输入要查找的帧数，例如: 100">
          <div class="form-text">程序将在工作表'七区'的A列查找此帧数，获取对应行的数据</div>
        </div>
        
        <div class="d-flex gap-2 justify-content-between">
          <button class="btn btn-primary" id="extractDataBtn">
            <i class="bi bi-search me-1"></i> 提取数据
          </button>
          <button class="btn btn-outline-danger flex-grow-1 ms-3" id="clearJsonBtn" style="max-width: 150px;">
            <i class="bi bi-trash me-1"></i> 清除JSON文件
          </button>
        </div>
        
        <div class="progress-container mt-4" style="display: none;" id="extractionProgressContainer">
          <h4 class="mb-3">处理进度</h4>
          <div class="d-flex justify-content-between mb-1">
            <span>完成情况</span>
            <span id="extractionProgressText">0%</span>
          </div>
          <div class="progress" style="height: 1.5rem;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="extractionProgressBar"></div>
          </div>
        </div>
        
        <div class="result-section mt-4" style="display: none;" id="extractionResultSection">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="bi bi-check-circle me-2"></i> 处理结果
          </h4>
          <div class="alert alert-success" role="alert" id="extractionResultMessage"></div>
          <div class="mt-3">
            <button class="btn btn-secondary ms-2" id="extractionResetBtn">
              <i class="bi bi-arrow-counterclockwise me-1"></i> 重新开始
            </button>
          </div>
        </div>

        <div id="json-output" class="log-panel mt-4">
            <h4 class="mb-3"><i class="bi bi-journal-text me-2"></i>提取的数据</h4>
            <pre><code id="json-content" class="language-json"></code></pre>
        </div>
      </div>
    </div>
    
    <!-- 离散系数计算标签页 -->
    <div class="tab-content" id="coefficient-variation-content">
      <div class="container">
        <div class="header text-center mb-4">
          <p class="text-muted">计算CSV数据的离散系数</p>
        </div>
        
        <div class="upload-area" id="cv-drop-zone">
          <div class="upload-icon">
            <i class="bi bi-file-earmark-spreadsheet fs-1"></i>
          </div>
          <h4>点击或拖拽CSV文件到此处</h4>
          <p class="text-muted">支持.csv格式文件</p>
          <input type="file" id="cvFileInput" accept=".csv" style="display: none;">
          
          <!-- 已选择文件显示区域 -->
          <div id="cv-selected-file" style="display: none;" class="mt-3">
            <div class="alert alert-success d-flex align-items-center">
              <i class="bi bi-file-check me-2"></i>
              <span>已选择文件: <strong id="cv-file-name"></strong></span>
            </div>
          </div>
        </div>
        
        <!-- Frame Index 输入区域 -->
        <div id="cvFrameIndexContainer" style="display: none;" class="mt-4">
          <h5 class="mb-3">Frame Index 设置</h5>
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="startFrameInput" class="form-label">起始帧数 (x)</label>
                    <input type="number" class="form-control" id="startFrameInput" min="1" placeholder="输入起始帧数">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="frameIndexInput" class="form-label">计算帧数 (n)</label>
                    <input type="number" class="form-control" id="frameIndexInput" min="1" placeholder="输入计算帧数">
                  </div>
                </div>
              </div>
              <div class="alert alert-info mt-3">
                <i class="bi bi-info-circle me-2"></i>
                  Frame Index = n - x + 1
                <br>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 计算按钮容器 - 移出上传区域 -->
        <div id="cvCalculateContainer" style="display: none;" class="mt-4 text-center">
          <button class="btn btn-primary btn-lg" id="calculateCVBtn">
            <i class="bi bi-calculator me-2"></i> 开始计算
          </button>
          
          <!-- 重置按钮组 - 计算完成后显示 -->
          <div id="cvResetButtonsContainer" style="display: none;" class="mt-3">
            <button class="btn btn-outline-primary me-2" id="cvReuploadBtn">
              <i class="bi bi-upload me-1"></i> 重新上传
            </button>
            <button class="btn btn-outline-secondary" id="cvReindexBtn">
              <i class="bi bi-arrow-repeat me-1"></i> 重新输入
            </button>
          </div>
        </div>
        
        <div class="progress-container mt-4" style="display: none;" id="cvProgressContainer">
          <h4 class="mb-3">处理进度</h4>
          <div class="d-flex justify-content-between mb-1">
            <span>完成情况</span>
            <span id="cvProgressText">0%</span>
          </div>
          <div class="progress" style="height: 1.5rem;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="cvProgressBar"></div>
          </div>
        </div>
        
        <div class="result-section mt-4" style="display: none;" id="cvResultsContainer">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="bi bi-check-circle me-2"></i> 处理结果
          </h4>
          <div class="table-responsive">
            <table class="table table-bordered table-hover" id="cvResultsTable">
              <thead class="table-light">
                <tr>
                  <th>区域</th>
                  <th>有效点数</th>
                  <th>平均值</th>
                  <th>标准差</th>
                  <th>离散系数</th>
                </tr>
              </thead>
              <tbody>
                <!-- 结果将通过JavaScript动态添加 -->
              </tbody>
            </table>
          </div>
          
          <!-- 保存JSON文件按钮 -->
          <div class="mt-4 text-center" id="saveJsonContainer" style="display: none;">
            <button class="btn btn-success" id="saveJsonBtn" style="white-space: normal; word-wrap: break-word; max-width: 100%; width: auto; padding: 0.5rem 1rem; display: inline-flex; align-items: center; justify-content: center; text-align: center;">
              <i class="bi bi-download me-1"></i> 保存离散数据JSON文件
            </button>
            <div class="form-text mt-2">
              <i class="bi bi-info-circle me-1"></i>
              将保存到桌面的'Ergonomic data'文件夹中
            </div>
          </div>
          
          <!-- 调试数据显示区域 -->
          <div class="mt-4" id="debugDataContainer" style="display: none;">
            <h6 class="mb-3 d-flex align-items-center">
              <i class="bi bi-bug me-2"></i> 调试数据详情
            </h6>
            <div class="accordion" id="debugAccordion">
              <!-- 调试数据将通过JavaScript动态添加 -->
            </div>
          </div>

        </div>
        
        <!-- 验证功能模块 -->
        <div class="validation-section mt-4" id="validationSection">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="bi bi-check2-square me-2"></i> 结果验证
          </h4>
          <p class="text-muted mb-3">手动输入数据验证离散系数计算的准确性</p>
          
          <!-- 计算方法说明（可折叠） -->
          <div class="card mb-4">
            <div class="card-header bg-light">
              <h6 class="mb-0">
                <button class="btn btn-link text-decoration-none p-0 text-start w-100 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#calculationMethodCollapse" aria-expanded="false" aria-controls="calculationMethodCollapse">
                  <i class="bi bi-info-circle me-2 text-primary"></i>
                  <span class="fw-semibold text-dark">计算方法说明</span>
                  <i class="bi bi-chevron-down float-end mt-1"></i>
                </button>
              </h6>
            </div>
            <div id="calculationMethodCollapse" class="collapse">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <h6 class="text-primary mb-3">
                      <i class="bi bi-funnel me-2"></i>数据预处理
                    </h6>
                    <ul class="list-unstyled">
                      <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        自动过滤掉数值为 0 和 -1 的数据点
                      </li>
                      <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        只保留有效的正数值进行计算
                      </li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <h6 class="text-primary mb-3">
                      <i class="bi bi-calculator me-2"></i>统计计算公式
                    </h6>
                    <div class="formula-section">
                      <div class="mb-3">
                        <div class="d-flex align-items-center mb-1">
                          <span class="badge bg-primary me-2">1</span>
                          <strong>平均值 (μ)</strong>
                        </div>
                        <div class="ms-4">
                          <code class="bg-light p-2 rounded d-block mb-1">μ = Σx / n</code>
                          <small class="text-muted">其中 x 为各数据点，n 为有效数据点总数</small>
                        </div>
                      </div>
                      
                      <div class="mb-3">
                        <div class="d-flex align-items-center mb-1">
                          <span class="badge bg-primary me-2">2</span>
                          <strong>标准差 (σ)</strong>
                        </div>
                        <div class="ms-4">
                          <code class="bg-light p-2 rounded d-block mb-1">σ = √[Σ(x - μ)² / (n - 1)]</code>
                          <!-- <small class="text-muted">使用样本标准差公式，分母为 n-1（贝塞尔校正）</small> -->
                        </div>
                      </div>
                      
                      <div class="mb-3">
                        <div class="d-flex align-items-center mb-1">
                          <span class="badge bg-primary me-2">3</span>
                          <strong>离散系数 (CV)</strong>
                        </div>
                        <div class="ms-4">
                          <code class="bg-light p-2 rounded d-block mb-1">CV = σ / μ</code>
                          <!-- <small class="text-muted">当平均值为 0 时，离散系数为无穷大 (∞)</small> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="alert alert-info mt-3 mb-0">
                  <i class="bi bi-lightbulb me-2"></i>
                  <strong>提示：</strong>离散系数是衡量数据相对变异程度的指标，数值越小表示数据越集中，越大表示数据越分散。
                </div> -->
              </div>
            </div>
          </div>
          
          <!-- 验证方式选择 -->
          <div class="mb-4">
            <div class="row">
              <div class="col-md-6">
                <div class="card h-100">
                  <div class="card-body">
                    <h6 class="card-title">
                      <i class="bi bi-keyboard me-2"></i>手动输入验证
                    </h6>
                    <p class="card-text text-muted">手动输入一组数据，验证计算结果</p>
                    <button class="btn btn-outline-primary" id="manualValidationBtn">
                      <i class="bi bi-pencil me-1"></i> 开始验证
                    </button>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card h-100">
                  <div class="card-body">
                    <h6 class="card-title">
                      <i class="bi bi-clipboard-data me-2"></i>选择区域验证
                    </h6>
                    <p class="card-text text-muted">选择已计算的区域数据进行验证</p>
                    <button class="btn btn-outline-success" id="regionValidationBtn" disabled>
                      <i class="bi bi-check-circle me-1"></i> 选择验证
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 手动输入验证区域 -->
          <div class="manual-validation-area" id="manualValidationArea" style="display: none;">
            <div class="card">
              <div class="card-header">
                <h6 class="mb-0">
                  <i class="bi bi-keyboard me-2"></i>手动数据输入
                </h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label for="manualDataInput" class="form-label">数据输入</label>
                  <textarea class="form-control" id="manualDataInput" rows="4" placeholder="请输入数值，用逗号、空格或换行分隔，例如：&#10;1.23, 2.45, 3.67&#10;或&#10;1.23 2.45 3.67&#10;或每行一个数值"></textarea>
                  <div class="form-text">
                    <i class="bi bi-info-circle me-1"></i>
                    支持多种格式：逗号分隔、空格分隔或每行一个数值。程序会自动过滤掉0和-1的值。
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <button class="btn btn-primary" id="calculateManualBtn">
                      <i class="bi bi-calculator me-1"></i> 计算验证
                    </button>
                    <button class="btn btn-secondary ms-2" id="clearManualBtn">
                      <i class="bi bi-x-circle me-1"></i> 清空
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 区域选择验证区域 -->
          <div class="region-validation-area" id="regionValidationArea" style="display: none;">
            <div class="card">
              <div class="card-header">
                <h6 class="mb-0">
                  <i class="bi bi-clipboard-data me-2"></i>区域数据验证
                </h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label for="regionSelect" class="form-label">选择要验证的区域</label>
                  <select class="form-select" id="regionSelect">
                    <option value="">请选择区域...</option>
                  </select>
                  <div class="form-text">
                    <i class="bi bi-info-circle me-1"></i>
                    选择一个已计算的区域，系统将使用该区域的原始数据进行验证计算。
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <button class="btn btn-success" id="calculateRegionBtn" disabled>
                      <i class="bi bi-check-circle me-1"></i> 验证计算
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 验证结果显示区域 -->
          <div class="validation-results" id="validationResults" style="display: none;">
            <div class="card mt-4">
              <div class="card-header">
                <h6 class="mb-0">
                  <i class="bi bi-clipboard-check me-2"></i>验证结果对比
                </h6>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead class="table-light">
                      <tr>
                        <th>计算项目</th>
                        <th>验证计算结果</th>
                        <th>原始计算结果</th>
                        <th>差异</th>
                        <th>状态</th>
                      </tr>
                    </thead>
                    <tbody id="validationResultsBody">
                      <!-- 验证结果将通过JavaScript动态添加 -->
                    </tbody>
                  </table>
                </div>
                <div class="mt-3">
                  <div class="alert" id="validationSummary" role="alert">
                    <!-- 验证总结将通过JavaScript动态添加 -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Word模板填充标签页 -->
    <div class="tab-content" id="data-export-content">
      <div class="container">
        <div class="header text-center mb-4">
          <p class="text-muted">将数据填充到Word报告中</p>
        </div>
        
        <!-- 文件API警告提示 -->
        <div class="alert alert-warning alert-dismissible fade show" role="alert" id="wordTemplateFileAPIWarning" style="display: none;">
          <i class="bi bi-exclamation-triangle-fill me-2"></i>
          <strong>警告：</strong> 文件API不可用，部分功能将受限。Word文档将通过浏览器下载。
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="mb-4">
          <label for="baseJsonFile" class="form-label">Base数据文件</label>
          <div class="input-group">
            <input type="text" class="form-control" id="baseJsonFile" placeholder="请选择Base JSON数据文件" readonly>
            <button class="btn btn-outline-secondary" type="button" id="browseBaseJsonBtn">
              <i class="bi bi-folder2-open me-1"></i>浏览
            </button>
          </div>
          <div class="form-text">
            <i class="bi bi-info-circle me-1"></i>
            请选择Base JSON数据文件。
            <br><small class="text-muted">支持的文件格式：.json</small>
          </div>
        </div>
        
        <div class="mb-4">
          <label for="lisanJsonFile" class="form-label">Lisan数据文件</label>
          <div class="input-group">
            <input type="text" class="form-control" id="lisanJsonFile" placeholder="请选择Lisan JSON数据文件" readonly>
            <button class="btn btn-outline-secondary" type="button" id="browseLisanJsonBtn">
              <i class="bi bi-folder2-open me-1"></i>浏览
            </button>
          </div>
          <div class="form-text">
            <i class="bi bi-info-circle me-1"></i>
            请选择lisan JSON数据文件。
            <br><small class="text-muted">支持的文件格式：.json</small>
          </div>
        </div>
        
        <div class="mb-4">
          <label for="wordTemplateFile" class="form-label">Word模板文件 (可选)</label>
          <div class="input-group">
            <input type="text" class="form-control" id="wordTemplateFile" placeholder="选择Word模板文件" readonly>
            <button class="btn btn-outline-secondary" type="button" id="browseWordTemplateBtn">
              <i class="bi bi-folder2-open me-1"></i>浏览
            </button>
          </div>
          <div class="form-text">
            <i class="bi bi-info-circle me-1"></i>
            如不选择，将使用默认的Word模板。
            <br><small class="text-muted">支持的文件格式：.docx, .doc</small>
          </div>
        </div>
        
        <div class="mb-4">
          <label for="wordOutputPath" class="form-label">输出文件路径 (可选)</label>
          <input type="text" class="form-control" id="wordOutputPath" placeholder="留空将使用桌面路径">
          <div class="form-text">如不指定，结果将保存到桌面</div>
        </div>
        
        <button class="btn btn-primary" id="fillTemplateBtn">
          <i class="bi bi-file-earmark-word me-1"></i> 填充数据
        </button>
        
        <div class="progress-container mt-4" style="display: none;" id="wordTemplateProgressContainer">
          <h4 class="mb-3">处理进度</h4>
          <div class="d-flex justify-content-between mb-1">
            <span>完成情况</span>
            <span id="wordTemplateProgressText">0%</span>
          </div>
          <div class="progress" style="height: 1.5rem;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="wordTemplateProgressBar"></div>
          </div>
        </div>
        
        <div class="result-section mt-4" style="display: none;" id="wordTemplateResultSection">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="bi bi-check-circle me-2"></i> 处理结果
          </h4>
          <div class="alert alert-success" role="alert" id="wordTemplateResultMessage"></div>
          <div class="mt-3">
            <button class="btn btn-secondary ms-2" id="wordTemplateResetBtn">
              <i class="bi bi-arrow-counterclockwise me-1"></i> 重新开始
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- xx标签页 -->
    <div class="tab-content" id="settings-content"> 
    </div>
    
    <!-- 帮助标签页 -->
    <div class="tab-content" id="help-content">
      <div class="container">
        <div class="header text-center mb-4">
          <p class="text-muted">帮助与支持</p>
        </div>
        
        <div class="section">
          <h5 class="mb-3">使用指南</h5>
          
          <div class="accordion" id="helpAccordion">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  如何上传CSV文件？
                </button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#helpAccordion">
                <div class="accordion-body">
                  在"CSV数据处理"标签页中，点击上传区域或将文件拖拽到上传区域即可上传CSV文件。支持上传多个CSV文件同时处理。
                </div>
              </div>
            </div>
            
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  如何设置列映射？
                </button>
              </h2>
              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#helpAccordion">
                <div class="accordion-body">
                  上传CSV文件后，系统会自动检测列映射。如果自动检测不准确，可以勾选"使用手动列映射"，然后手动指定各列的索引值（从0开始）。
                </div>
              </div>
            </div>
            
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  如何查看处理结果？
                </button>
              </h2>
              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#helpAccordion">
                <div class="accordion-body">
                  数据处理完成后，系统会显示处理结果，包括成功处理的文件数量和保存路径。处理日志区域会显示详细的处理过程和可能出现的错误信息。
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- <div class="section mt-4">
          <h5 class="mb-3">联系支持</h5>
          <p>如果您在使用过程中遇到问题，请联系技术支持：</p>
          <p><i class="bi bi-envelope me-2"></i>Glenn.Gao@sgs.com</p>
          <p><i class="bi bi-telephone me-2"></i>xxx</p>
        </div> -->
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="user-data.js"></script>
  <script src="sofaData-process.js"></script>
  <script type="module">
    // import { loadPluginInfo } from './PluginInfo.js';
    import { initVantaBackground, destroyVantaBackground } from './vantaBackground.js';
    
    document.addEventListener('DOMContentLoaded', async() => {
      if (htmlUIAPI) {
        htmlUIAPI.injectWindowControls();
      }
      
      // 初始化 Vanta 背景
      if (typeof VANTA !== 'undefined') {
        initVantaBackground();
        
        // 页面卸载时销毁 Vanta 背景
        window.addEventListener('beforeunload', () => {
          destroyVantaBackground();
        });
      } else {
        console.error('VANTA 库未正确加载');
      }
      
      // 启用所有Bootstrap工具提示
      const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });
      
      // 插入插件信息组件
      // try {
      //   const pluginInfoContainer = document.getElementById('plugin-info-container');
      //   if (pluginInfoContainer) {
      //     pluginInfoContainer.innerHTML = await (await fetch('./PluginInfo.html')).text();
      //     // 加载插件信息
      //     await loadPluginInfo('manifest.json');
      //   }
      // } catch (error) {
      //   console.error('加载插件信息失败:', error);
      // }
      
      // 侧边栏切换 - 确保变量在使用前已定义
      const menuToggle = document.querySelector('#menu-toggle');
      const sidebar = document.querySelector('#sidebar');
      const sidebarOverlay = document.querySelector('#sidebar-overlay');
      const mainContent = document.querySelector('#main-content');
      
      // 默认显示第一个标签页
      showTabContent('csv-process');
      
      // 初始化侧边栏状态
      if (window.innerWidth >= 992) {
        // 大屏幕默认显示侧边栏
        sidebar.classList.add('open');
        document.body.classList.add('sidebar-open');
        mainContent.classList.add('sidebar-open');
      } else {
        // 小屏幕默认隐藏侧边栏
        sidebar.classList.remove('open');
        document.body.classList.remove('sidebar-open');
        mainContent.classList.remove('sidebar-open');
      }
      
      // 菜单切换按钮点击事件
      if (menuToggle) {
        menuToggle.addEventListener('click', function() {
          toggleSidebar();
        });
      }
      
      // 遮罩层点击事件
      if (sidebarOverlay) {
        sidebarOverlay.addEventListener('click', function() {
          closeSidebar();
        });
      }
      
      // 菜单项点击事件
      const menuItems = document.querySelectorAll('.menu-item');
      menuItems.forEach(item => {
        item.addEventListener('click', function() {
          // 移除所有菜单项的active类
          menuItems.forEach(i => i.classList.remove('active'));
          // 给当前点击的菜单项添加active类
          this.classList.add('active');
          
          // 获取标签页ID
          const tabId = this.getAttribute('data-tab');
          
          // 切换标签页
          showTabContent(tabId);
          
          // 在小屏幕上点击菜单项后关闭侧边栏
          if (window.innerWidth < 992) {
            closeSidebar();
          }
        });
      });
      
      // 窗口大小变化时调整布局
      window.addEventListener('resize', function() {
        const sidebar = document.querySelector('#sidebar');
        const sidebarOpen = sidebar.classList.contains('open');
        
        // 处理从小屏幕切换到大屏幕的情况
        if (window.innerWidth >= 992 && sidebarOpen) {
          document.body.classList.add('sidebar-open');
        } else if (window.innerWidth < 992) {
          document.body.classList.remove('sidebar-open');
        }
        
        adjustLayout();
      });
      
      // 初始化调整布局
      adjustLayout();
    });
    
    // 切换侧边栏
    function toggleSidebar() {
      const sidebar = document.querySelector('#sidebar');
      const sidebarOverlay = document.querySelector('#sidebar-overlay');
      const mainContent = document.querySelector('#main-content');
      
      sidebar.classList.toggle('open');
      
      // 在大屏幕模式下，确保侧边栏状态正确
      if (window.innerWidth >= 992) {
        document.body.classList.toggle('sidebar-open');
      }
      
      sidebarOverlay.style.display = sidebar.classList.contains('open') ? 'block' : 'none';
      adjustLayout();
    }
    
    // 关闭侧边栏
    function closeSidebar() {
      const sidebar = document.querySelector('#sidebar');
      const sidebarOverlay = document.querySelector('#sidebar-overlay');
      
      sidebar.classList.remove('open');
      
      // 在大屏幕模式下，确保侧边栏状态正确
      if (window.innerWidth >= 992) {
        document.body.classList.remove('sidebar-open');
      }
      
      sidebarOverlay.style.display = 'none';
      adjustLayout();
    }
    
    // 根据窗口大小和侧边栏状态调整主内容区域
    function adjustLayout() {
      const sidebar = document.querySelector('#sidebar');
      const mainContent = document.querySelector('#main-content');
      const sidebarOpen = sidebar.classList.contains('open');
      
      if (window.innerWidth >= 992) {
        // 大屏幕
        if (sidebarOpen) {
          mainContent.classList.add('sidebar-open');
          document.body.classList.add('sidebar-open');
        } else {
          mainContent.classList.remove('sidebar-open');
          document.body.classList.remove('sidebar-open');
        }
        mainContent.classList.remove('mobile-sidebar-open');
      } else {
        // 小屏幕
        mainContent.classList.remove('sidebar-open');
        document.body.classList.remove('sidebar-open');
        if (sidebarOpen) {
          mainContent.classList.add('mobile-sidebar-open');
          document.body.classList.add('mobile-sidebar-open');
        } else {
          mainContent.classList.remove('mobile-sidebar-open');
          document.body.classList.remove('mobile-sidebar-open');
        }
      }
    }
    
    // 显示指定的标签页内容
    function showTabContent(tabId) {
      // 隐藏所有标签页内容
      const tabContents = document.querySelectorAll('.tab-content');
      tabContents.forEach(content => {
        content.classList.remove('active');
      });
      
      // 显示指定的标签页内容
      const activeTab = document.getElementById(tabId + '-content');
      if (activeTab) {
        activeTab.classList.add('active');
        
        // 如果切换到数据提取标签页，检查并初始化输入文件夹路径
        if (tabId === 'data-analysis') {
          const dataExtractionInputFolder = document.getElementById('dataExtractionInputFolder');
          if (dataExtractionInputFolder && !dataExtractionInputFolder.value) {
            // 如果输入框为空，尝试从localStorage获取路径
            const savedPath = localStorage.getItem('dataExtractionInputFolder');
            if (savedPath) {
              dataExtractionInputFolder.value = savedPath;
              console.log(`已从本地存储加载输入文件夹路径: ${savedPath}`);
            } else if (window.fileAPI && window.fileAPI.getDesktopPath) {
              // 如果localStorage中没有保存的路径，尝试获取桌面路径
              window.fileAPI.getDesktopPath()
                .then((desktopPath) => {
                  const ergonomicDataFolder = `${desktopPath}\\Ergonomic data`;
                  dataExtractionInputFolder.value = ergonomicDataFolder;
                  console.log(`已设置默认输入文件夹路径: ${ergonomicDataFolder}`);
                })
                .catch((error) => {
                  console.error(`获取桌面路径失败: ${error.message}`);
                });
            }
          }
        }
      }
    }
  </script>
  <script>
    // 窗口控制函数
    function minimizeWindow() {
      if (window.electronAPI && window.electronAPI.minimizeWindow) {
        window.electronAPI.minimizeWindow();
      }
    }

    function toggleMaximize() {
      if (window.electronAPI && window.electronAPI.toggleMaximize) {
        window.electronAPI.toggleMaximize();
      }
    }

    function closeWindow() {
      if (window.electronAPI && window.electronAPI.closeWindow) {
        window.electronAPI.closeWindow();
      }
    }

    // 注意：上传区域事件已在sofaData-process.js中初始化，此处不再重复绑定
    // 注意：重置按钮事件已在sofaData-process.js的showResult和showBatchResult函数中绑定，此处不再重复绑定
  </script>
</body>
</html>